<template>
	<view>
		
		<uni-popup ref="popup" type="bottom">
		    <view class="pBoxUp">			
		        <view class="textCenter f32 psTitle border-bottom">
		            请选择配送时间
		        </view>
		        <view class="shopPopup bgff justify-between default-flex">
		            <view class="f30 t666 lBox">
		                <view v-for="(item,index) in jmhDay" @click="selectLDate(item)" :class="sLDate==item.formatDate?'ed':''" class="boxLDate" 
		                    :key="index">{{item.desc}}({{item.name}})
		                </view>
		            </view>
		            <view>
		                <view v-for="(item,index) in timeList" @click="selectRDate(item)" 
		                    :class="[sRightDate==item.time?'ed':'',item.disabled?'disabled':'']" :key="index" class="rBox"
		                    >
		                    {{item.time}}{{item.disabled?' (超出配送时间)':''}}
		                </view>
		                <view class="empty f28 text-center" style="color: #999;margin-top: 40rpx;" 
		                v-if="timeList.length<1">
		                    今天没有时间了,看看明天吧
		                </view>	
		            </view>
		        </view>
		        <view class="cancelButton" @click="close()">
		            取消
		        </view>	
		    </view>	 
		</uni-popup>
	</view>
</template>

<script>
	import {getDate} from '@/utils/utils.js'
	export default {
		name:"distributionBox", 
		data() {
			return {
				sendTime:'',
				sRightDate:'',
				sLDate:'',
				jmhDay:'',
				timeList:[
					{disabled:false,time:'07:00~09:00', id:1},
					{disabled:false,time:'09:00~11:00', id:2},
				   {disabled:false,time:'11:00~13:00', id:3},
				   {disabled:false,time:'13:00~15:00', id:4},
				   {disabled:false,time:'15:00~17:00', id:5},
				   {disabled:false,time:'17:00~19:00',id:6},
				   {disabled:false,time:'19:00~21:00',id:7},
				   {disabled:false,time:'21:00~23:00',id:8}
				],
			};
		},
		methods:{ 
			close(){
				this.$refs.popup.close();
			},
			getWeekDate(day){
				var weeks = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六"); 
				var week = weeks[day]; 
				return week;
			}, 
			//获取当前日期的下一天日期
			getNextDay(){  
				var day=this.getWeekDate(new Date().getDay());
				var newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(new Date()) 
				var isDay=getDate().fullDate; 
				var nextDay= this.getWeekDate(new Date(new Date().getTime() + 24 * 60 * 60 * 1000).getDay());
				var nDate=getDate(new Date(new Date().getTime()+ 24 * 60 * 60 * 1000)).fullDate;
				console.log(nDate);
				var HDay=this.getWeekDate(new Date(new Date().getTime() + 48 * 60 * 60 * 1000).getDay());
				var hDate=getDate(new Date(new Date().getTime()+ 48 * 60 * 60 * 1000)).fullDate; 
				let d1=hDate.substr(hDate.indexOf('-')+1)   
				this.sLDate=isDay;
				this.selectLDate(1);
				this.jmhDay=[{name:day,id:1,formatDate:isDay,desc:'今天'},{name:nextDay,id:2,formatDate:nDate,desc:'明天'},
				{name:HDay,id:3,formatDate:hDate,desc:d1.substr(0,d1.indexOf('-'))+'月'+d1.substr(d1.indexOf('-')+1)+'日'}] 
			},
			showBox(){
				this.$refs.popup.open();
			},
			selectRDate(item){
				if(item.disabled){ 
					return;
				}
				this.sRightDate=item.time;
				//this.appointTime=this.sLDate+" "+item.time;
				this.defaultTime(item.time);
				this.$refs.popup.close();
				//this.$emit('update:getTime', this.appointTime)
			},
			defaultTime(time){
				this.appointTime=this.sLDate+" "+time;
				this.$emit('update:getTime', this.appointTime);
			},
			selectLDate(val){
				console.log(val);
				if(val!=1){
					this.sLDate=val.formatDate;
				}
				let t=[{disabled:false,time:'07:00~09:00', id:1},
					{disabled:false,time:'09:00~11:00', id:2},
				   {disabled:false,time:'11:00~13:00', id:3},
				   {disabled:false,time:'13:00~15:00', id:4},
				   {disabled:false,time:'15:00~17:00', id:5},
				   {disabled:false,time:'17:00~19:00',id:6},
				   {disabled:false,time:'19:00~21:00',id:7},
				   {disabled:false,time:'21:00~23:00',id:8}]
				if(val.desc=='今天'||val==1){ 
					if(new Date().getHours()<=6){
						this.defaultTime(t[0].time);
						this.timeList=t;
						
					}else if(new Date().getHours()<=8){ 
						t[0].disabled=true;
						this.defaultTime(t[1].time);
						this.timeList=t;
					}
					else if(new Date().getHours()<=10){ 
						t[0].disabled=true;
						t[1].disabled=true;
						this.timeList=t;
						this.defaultTime(t[2].time);
					}else if(new Date().getHours()<=12){
						t[0].disabled=true;
						t[1].disabled=true;
						t[2].disabled=true;
						this.defaultTime(t[3].time);
						this.timeList=t; 
					}else if(new Date().getHours()<=14){
						
						t[0].disabled=true;
						t[1].disabled=true;
						t[2].disabled=true;
						t[3].disabled=true;
						this.defaultTime(t[4].time);
						 this.timeList=t;  
					}else if(new Date().getHours()<=16){
						t[0].disabled=true;
						t[1].disabled=true;
						t[2].disabled=true;
						t[3].disabled=true;
						t[4].disabled=true;
						this.defaultTime(t[5].time);
						this.timeList=t;  
					}else if(new Date().getHours()<=18){
						t[0].disabled=true;
						t[1].disabled=true;
						t[2].disabled=true;
						t[3].disabled=true;
						t[4].disabled=true;
						t[5].disabled=true;
						this.defaultTime(t[6].time);
						this.timeList=t;
					}else if(new Date().getHours()<=20){
						t[0].disabled=true;
						t[1].disabled=true;
						t[2].disabled=true;
						t[3].disabled=true;
						t[4].disabled=true;
						t[5].disabled=true;
						t[6].disabled=true;
						this.defaultTime(t[7].time);
						this.timeList=t;
					}else{
						t.forEach(item=>{
							item.disabled=true;
						})
						this.timeList=t;
					} 
					// console.log('最终的时间列表');
					// console.log(this.timeList);
				}else{ 
					this.timeList=t;
				} 
				this.sRightDate='';
			},
		}
	}
</script>
<style lang="scss" scoped>
 .pBoxUp{
		background: #f5f5f5;
		.psTitle{
			line-height: 100rpx; 
			text-align: center;
			border-bottom: 1rpx solid #f7f7f7;
		}
		.shopPopup{
			backgound:#ffffff;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
		}
		.boxLDate{
			font-size: 26rpx;
			height:90rpx;
			line-height: 90rpx;
			width:273rpx;
			text-align: center;
		}
		.lBox{
			color:#666666;
			background: #f5f5f5;
			font-size: 30rpx;
		}
		.boxLDate.ed{
			color:#E86748;
			background: #fff;
		}
		.rBox.ed{
			color:#E86748;
		}
		.rBox{
			width: 239px;
			padding-left: 20rpx;
			font-size: 26rpx;
			color: #333;
			height:90rpx;
			background: #fff;
			line-height: 90rpx;
		}
		.cancelButton{
			font-size: 36rpx;
			color: #fff;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx; 
			border-top: 1px solid #e5e5e5;
			background: #E86748;
		}
	}
</style>